<template>
  <div>
    <h4>编辑博文</h4>
    <div class="content">
      <el-form :rules="blogrule" :model="blogForm" label-width="80px" enctype="multipart/form-data">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="blogForm.title" placeholder="请输入标题" class="title"></el-input>
        </el-form-item>
        <el-form-item label="博客分类" prop="catagories">
          <el-select v-model="blogForm.catagories" placeholder="请选择分类">
            <el-option label="吐槽" value="吐槽"></el-option>
            <el-option label="流水账" value="流水账"></el-option>
            <el-option label="学习笔记" value="学习笔记"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章标签">
          <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+添加分类</el-button>
        </el-form-item>
        <el-form-item label="是否置顶">
          <el-radio-group v-model="blogForm.isTop">
            <el-radio label="true">是</el-radio>
            <el-radio label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="封面图片">
          <input type="file" @change="getFile($event)" class="upload">
          <div class="preview">
            <img :src="imgURL">
          </div>
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <quill-editor v-model="blogForm.content"></quill-editor>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="addBlog" class="btn">发表博文</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      blogForm: {
        title: '',
        author: window.sessionStorage.getItem('id'),
        isTop: false,
        content: '',
        catagories: '',
        tags: '',
        file: ''
      },
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      formData: new FormData(),
      imgURL: '',
      blogrule: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        catagories: [
          { required: true, message: '请输入选择分类', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleClose (tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm () {
      const inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    getFile (event) {
      this.blogForm.file = event.target.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(this.blogForm.file)
      reader.onload = () => {
        this.imgURL = reader.result
      }
    },
    async addBlog () {
      this.blogForm.tags = this.dynamicTags.join(',')
      for (var i in this.blogForm) {
        this.formData.append(i, this.blogForm[i])
      }
      const { data: res } = await this.$http.post('/article', this.formData)
      if (res.meta.status !== 200) return this.$message.error('发表博文列表失败')
      this.$message.success('发表博文列表成功')
    }
  }
}
</script>

<style lang="less" scoped>
h4 {
    text-align: center;
    margin-bottom: 20px;
}
.content {
    width: 80%;
    margin: 0 auto;
}
.title {
    width: 60%;
}
.input-new-tag {
    width: 90px;
    margin-right: 10px;
    vertical-align: bottom;
}
.button-new-tag, .el-tag, .el-tag {
    margin-right: 10px;
}
.btn {
  float: right;
}

.preview {
  margin-bottom: -20px;
  width: 100%;
  img {
    width: 100%;
  }
}
</style>
